<template>
    <div class="login">
        <h1>LOGIN</h1>
        <el-form
            :model="model"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="60px"
            class="demo-ruleForm"
        >
            <el-form-item label="用户名" prop="name">
                <el-input
                    type="text"
                    v-model="model.name"
                    autocomplete="off"
                    style="width: 300px"
                ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input
                    type="password"
                    v-model="model.password"
                    autocomplete="off"
                    style="width: 300px"
                ></el-input>
            </el-form-item>
            <el-form-item class="button">
                <el-button
                    type="primary"
                    @click="submitForm('ruleForm')"
                    style="margin-left: 50px"
                    >登录</el-button
                >
                <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "Login",
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else if (value.length < 6 || value.length >= 12) {
                callback(new Error("密码为6-12位!"));
            } else {
                callback();
            }
        };
        var validateName = (rule, value, callback) => {
            if (value.trim() === "") {
                callback(new Error("请输入用户名!"));
            } else if (value.length <= 1) {
                callback(new Error("用户名要大于一个字符!"));
            } else {
                callback();
            }
        };
        return {
            rules: {
                password: { validator: validatePass, trigger: "blur" },
                name: { validator: validateName, trigger: "blur" },
            },
            model: {
                name: "",
                password: "",
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
              try{
                if (valid) {
                  const res = await this.$http.post("/login", this.model);
                  // console.log("res", res);
                  this.$message({
                    message: "登录成功!",
                    type: "success",
                    onClose: true,
                  });
                  localStorage.token = res.data.token;
                  this.$router.push("/");
                } else {
                  console.log("error submit!!");
                  return false;
                }
              } catch (err) {
                console.log(err)
              }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>

<style lang="scss" scoped>
.login {
    border: 1px solid #cacdd1;
    border-radius: 10px;
    width: 500px;
    height: 300px;
    margin: 200px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 3px 3px #cacdd1;
}
</style>